import 'package:flutter/material.dart';

class AspectRatioExample extends StatefulWidget {
  const AspectRatioExample({Key? key}) : super(key: key);

  @override
  State<AspectRatioExample> createState() => _AspectRatioExampleState();
}

class _AspectRatioExampleState extends State<AspectRatioExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AspectRatioExample'),
      ),
      body: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Column(
          children: [
            Container(
              color: Colors.blue,
              alignment: Alignment.center,
              width: double.infinity,
              height: 100.0,
              child: AspectRatio(
                aspectRatio: 16 / 9,
                child: Container(
                  color: Colors.orangeAccent,
                ),
              ),
            ),
            Container(
              color: Colors.blue,
              alignment: Alignment.center,
              width: 150,
              height: 150.0,
              child: FractionallySizedBox(
                alignment: Alignment.topLeft,
                widthFactor: 1.5,
                heightFactor: 0.5,
                child: Container(
                  color: Colors.red,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
